import React from 'react'
import { Text, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

const triangleArrowRight = require('src/imgC/home/triangle.png')
export default function ResumeItem (props) {
  const {
    labelImgSrc, leftLabel, rightValue, onPress, style, rightComponent
  } = props
  return (
    <View style={style}>
      <CustomButton style={styles.myResumeContentItemVIew} onPress={onPress}>
        <CustomImage style={styles.myResumeContentItemImg} source={labelImgSrc}/>
        <Text style={styles.myResumeContentItemLabel}>{leftLabel}</Text>
        {rightComponent || <Text style={styles.myResumeContentItemRightLabel}>{rightValue}</Text>}
        <CustomImage style={styles.myResumeContentItemRightImg} source={triangleArrowRight}/>
      </CustomButton>
    </View>
  )
}

ResumeItem.propTypes = {
  labelImgSrc: PropTypes.number,
  leftLabel: PropTypes.string,
  rightValue: PropTypes.string,
  onPress: PropTypes.func,
  rightComponent: PropTypes.element,
  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}
ResumeItem.defaultProps = {}
const styles = StyleSheet.create({
  myResumeContentItemVIew: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  myResumeContentItemImg: {
    width: ScaleS(23),
    height: ScaleS(23),
    marginRight: ScaleS(16)
  },
  myResumeContentItemLabel: {
    flex: 1,
    color: '#444444',
    fontSize: ScaleT(17),
    fontWeight: '400'
  },
  myResumeContentItemRightLabel: {
    color: '#A5A5A5',
    fontSize: ScaleT(15),
    fontWeight: '400'
  },
  myResumeContentItemRightImg: {
    width: ScaleS(7),
    height: ScaleS(5),
    marginLeft: ScaleS(12),
    transform: [{
      rotate: '-90deg'
    }]
  }
})
